<!doctype html>
<html lang="zh-hans">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a blog page with a list of posts.">
    <title>Scrum Board</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'pure-min.css' %}" />

    <!--[if lte IE 8]>
        <link rel="stylesheet" href="{% static 'grids-responsive-old-ie-min.css' %}">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="{% static 'grids-responsive-min.css' %}">
    <!--<![endif]-->
    <link rel="stylesheet" href="{% static 'scrum/scrum.css' %}">

</head>

<body>
    <div id="content"></div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdn.bootcss.com/backbone.js/1.3.3/backbone-min.js"></script>
    <script id="config" type="text/json">
        {
            "models": {},
            "collections": {},
            "views": {},
            "router": null,
            "apiRoot": "/api/scrum/",
            "apiLogin": "/api/scrum/token/"
        }
    </script>
    <script type="text/template" id="login-template">
        <form method="post" action="">
            <label for="username">Username</label>
            <input id="username" type="text" name="username" maxlength="30" required />
            <label for="password">Password</label>
            <input id="password" type="password" name="password" required />
            <button type="submit">Login</button>
        </form>
    </script>
    <script type="text/template" id="header-template">
        <span class="title">Scrum Board Example</span>
        <% if(authenticated){ %>
            <nav>
                <a href="/" class="button">Sprints</a>
                <a href="#" class="logout button">Logout</a>
            </nav>
            <% } %>
    </script>
    <script type="text/template" id="home-template">
        <h1>Welcome to my Scrum Board Project </h1>
        <h2>Your Sprints</h2>
        <button class="add" type="submit">Add Sprint</button>
        <% if (sprints !== null) { %>
            <div class="sprints">
                <% _.each(sprints.models,function(sprint) { %>
                    <a href="#sprint/<%- sprint.get('id') %>" class="sprint">
                        <%- sprint.get('name') %> <br/>
                            <span>DUE BY <%- sprint.get('end_at') %></span>
                    </a>
                    <% }); %>
            </div>
            <% }else{ %>
                <h3 class="loading">Loading...</h3>
                <% } %>
    </script>
    <script type="text/template" id="new-sprint-template">
        <form action="" method="post">
            <label for="id_name">Sprint Name</label>
            <input id="id_name" type="text" name="name" maxlength="100" required />
            <label for="id_end">End Date</label>
            <input id="id_end" type="date" name="end_at" />
            <label for="id_description">Description</label>
            <textarea id="id_description" name="description" cols="50"></textarea>
            <button class="cancel">Cancel</button>
            <button type="submit">Create</button>
        </form>
    </script>
    <script type="text/html" id="sprint-template">
        <% if (sprint !== null) { %>
            <% if (!sprint.invalid) { %>
                <h2>
                    <%- sprint.get('name') %>
                </h2>
                <span class="due-date">Due <%- sprint.get('end') %></span>
                <p class="description">
                    <%- sprint.get('description') %>
                </p>
                <div class="tasks"></div>
                <% } else { %>
                    <h1>Sprint
                        <%- sprint.get('id') %> not found.</h1>
                    <% } %>
                        <% } else { %>
                            <h1 class="loading">Loading...</h1>
                            <% } %>
    </script>
    <script type="text/html" id="status-template">
        <h4>
            <%- title %>
        </h4>
        <div class="list"></div>
        <% if (sprint === null) { %>
            <button class="add" type="submit">Add Task</button>
            <% } %>
    </script>
    <script src="{% static 'scrum/app.js' %}"></script>
</body>

</html>